<template>
  <div class="task-container">
    <div class="task-item" v-for="(task, idx) in taskArr" :key="idx">
      <div class="task-main">
        <div class="main-left">
          <div class="task-name">
            <img class="task-icon" src="@/assets/img/briefcase.png" alt="">
            <span class="task-name-text">{{ task.name }}</span>
          </div>
          <div class="task-info">
            <div class="info-status">
              <span>任务状态：</span>
              <span v-if="task.status === 0" class="doing">进行中</span>
              <span v-if="task.status === 1" class="delay">已逾期</span>
              <span v-if="task.status === 2" class="book">已预约</span>
            </div>
            <div class="info-expect">
              <span>预期时间：</span>
              <span class="expect-time">{{ task.expectTime }}</span>
            </div>
          </div>
        </div>
        <div class="main-right">
          <div class="circle-progress">
            <!-- SVG环形进度条 -->
            <svg :viewBox="`0 0 ${size} ${size}`">
              <!-- 背景圆环 -->
              <circle
                class="progress-bg"
                :cx="size/2"
                :cy="size/2"
                :r="radius"
                :stroke-width="strokeWidth"
              />
              <!-- 动态进度圆环 -->
              <circle
                class="progress-bar"
                :cx="size/2"
                :cy="size/2"
                :r="radius"
                :stroke-width="strokeWidth"
                :stroke-dasharray="circumference"
                :stroke-dashoffset="getDashOffset(task.progress)"
              />
            </svg>
            
            <!-- 中心文本 -->
            <div class="progress-text">
              <div class="percentage">{{ task.progress }}%</div>
              <div class="label">进度</div>
            </div>
          </div>
        </div>
      </div>
      <div class="task-footer">
        <span v-for="(note, i) in task.tool" :key="i">{{ note }}</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import { Tcmd } from './command';
import { Tsrv } from '@/services';

@Component({
  components: {
  }
})
export default class Task extends Vue {
  private timer: any = null;

  private isRunning: boolean = false

  private value: number = 0;

  private taskArr: any = [
    // {
    //   // 任务名
    //   name: '#010021任务',
    //   // 任务状态 0：已准备, 1：已预约，2：进行中， 3：已延期
    //   status: 0,
    //   // 预期时间
    //   expectTime: '13:00 ~ 14:30',
    //   // 进度
    //   progress: 50,
    //   // 补充信息 （可选）
    //   tool: ['管路系统', '起重机系统', '槽体配套设备']
    // }
    // {
    //   name: '',
    //   status: 0, // doing, delay, book
    //   expectTime: '',
    //   progress: 0,
    //   tool: []
    // },
    // {
    //   name: '',
    //   status: 0, // doing, delay, book
    //   expectTime: '',
    //   progress: 0,
    //   tool: []
    // },
    // {
    //   name: '',
    //   status: 0, // doing, delay, book
    //   expectTime: '',
    //   progress: 0,
    //   tool: []
    // }
  ];

  private progress: number = 90;

  // 进度条尺寸参数
  private size = 120;         // SVG容器尺寸
  private strokeWidth = 10;   // 进度条粗细
  
  // 计算半径
  get radius(): number {
    return (this.size - this.strokeWidth) / 2;
  }
  
  // 计算圆周长
  get circumference(): number {
    return 2 * Math.PI * this.radius;
  }
  
  // 计算进度偏移量
  get dashOffset(): number {
    return this.circumference * (1 - this.progress / 100);
  }

  private getDashOffset(progress: number): number {
    return this.circumference * (1 - progress / 100);
  }

  created(){}

  mounted(){
    this.getTaskData();
    this.startTimer(60000);
  }

  private startTimer(time: number = 3000) {
    if (!this.isRunning) {
      this.isRunning = true
      this.timer = setInterval(() => {
        this.getTaskData();
      }, time)
    }
  }

  private pauseTimer() {
    if (this.isRunning && !Tsrv.noValue(this.timer)) {
      clearInterval(this.timer)
      this.isRunning = false
    }
  }

  private getTaskData(): Promise<boolean> {
    return new Promise((resolve, reject)=> {
      const param = {
        type: 'svcLogic',
        cmd: 'sw_task_overview',
        userInfo: {},
        funInfo: {},
        data: {}
      }
      Tcmd.doEvent(param).then(res=> {
        const [b, resp, data, msg] = res;
        if (b) {
          if (!Tsrv.noValue(data['taskList'])) {
            this.taskArr = data['taskList']
          }
          resolve(true);
        } else {
          this.$Message.error(msg);
          resolve(false);
        }
      }).catch(err=> {
        this.$Message.error(err);
      });
    })
  }

  beforeDestroy() {
    this.pauseTimer();
  }

}
</script>

<style lang="scss" scoped>
.task-container{
  width: 100%;
  height: 100%;
  background-color: transparent;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 10px;
  padding: 10px 20px;

  .task-item {
    height: 100%;
    background: #7e818729;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 3fr 2fr;
    padding: 10px;
    color: #fff;
    border-bottom: 3px solid #405374;
    .task-main {
      height: 100%;
      width: 100%;
      display: grid;
      grid-template-columns: 7fr 3fr;
      grid-template-rows: 1fr;
      .main-left {
        height: 100%;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 2fr;
        gap: 5px;
        .task-name {
          height: 100%;
          width: 100%;
          display: flex;
          flex-direction: row;
          justify-content: start;
          align-items: center;
          .task-icon {
            width: 17px;
            height: 15px;
            border-radius: 1px;
            // border: 1px solid #5DB6C3;
            margin-right: 5px;
          }
          .task-name-text {
            font-size: 14px;
            font-weight: 700;
          }
        }
        .task-info {
          height: 100%;
          width: 100%;
          display: grid;
          grid-template-columns: 1fr;
          grid-template-rows: 1fr 1fr;
          padding-left: 10px;
          border-left: 1px solid #6DA2B5;
          margin-left: 10px;
          align-items: center;
          .doing {
            color: #6BCB4F;
          }
          .delay {
            color: #F04818;
          }
          .book {
            color: #FAD110;
          }

          .info-expect {

            .expect-time {
              font-family: DINAlternate, DINAlternate;
              // font-weight: bold;
              font-size: 15px;
              color: #3FAEFF;
              text-align: left;
              font-style: normal;
            }
          }
        }
      }
      .main-right {
        height: 100%;
        width: 100%;
        // display: grid;
        // grid-template-columns: 7fr 3fr;
        // grid-template-rows: 1fr;
        .circle-progress {
          position: relative;
          width: 120px;
          height: 120px;
        }

        svg {
          transform: rotate(-90deg); // 从顶部开始
        }

        .progress-bg {
          fill: none;
          stroke: #eee; // 背景色
        }

        .progress-bar {
          fill: none;
          stroke: #42b983; // 进度条颜色
          stroke-linecap: round;
          transition: 
            stroke-dashoffset 0.8s cubic-bezier(0.47, 1.64, 0.41, 0.8),
            stroke 0.3s ease;
        }

        .progress-text {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          text-align: center;
          
          .percentage {
            font-size: 24px;
            font-weight: bold;
            color: #fff;
          }
          
          .label {
            font-size: 14px;
            color: #999;
            margin-top: 4px;
          }
        }
      }
    }
    .task-footer {
      height: 100%;
      width: 100%;
      margin-left: 10px;
      padding-left: 10px;
      padding-top: 10px;
      span {
        width: 52px;
        height: 18px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 300;
        font-size: 13px;
        color: #FFFFFF;
        line-height: 18px;
        text-align: left;
        font-style: normal;
      }
      span + span {
        margin-left: 10px;
      }
    }
  }
} 
</style> 